<template>
    <div>
        <div class="bread">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/oms/order' }">
                    订单
                </el-breadcrumb-item>
                <el-breadcrumb-item>退货申请处理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="card">
            <el-card class="box-card">
                <div class="card-header">
                    <div>
                        <el-icon style="margin-top">
                            <Search />
                        </el-icon>
                        <span>筛选搜索</span>
                    </div>
                    <div>
                        <el-button class="button" @click="onShowEdit">重置</el-button>
                        <el-button class="button" type="primary" @click="onSearch">查询搜索</el-button>
                    </div>
                </div>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="输入搜索" class="form-item">
                        <el-input placeholder="服务单号" v-model="valuesid" />
                    </el-form-item>
                    <el-form-item label="处理状态" class="form-item">
                        <el-select class="m-2" v-model="values" placeholder="全部">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="申请时间" class="form-item">
                        <el-col :span="11">
                            <el-date-picker v-model="formVal.createTime" type="date" placeholder="请选择时间"
                                style="width: 100%" />
                        </el-col>
                    </el-form-item>
                    <el-form-item label="操作人员" class="form-item">
                        <el-input placeholder="全部" v-model="formVal.handleMan" />
                    </el-form-item>
                    <el-form-item label="处理时间" class="form-item">
                        <el-col :span="11">
                            <el-date-picker v-model="formVal.handleTime" type="date" placeholder="请选择时间"
                                style="width: 100%" />
                        </el-col>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card style="margin: 20px 0">
                <el-icon>
                    <Tickets></Tickets>
                </el-icon>
                <span>数据列表</span>
            </el-card>
            <el-table :data="tableData" style="width: 100%" :border="true" :key="tablekey"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" />
                <el-table-column prop="id" label="服务单号" width="70" />
                <el-table-column width="200" label="申请时间">
                    <template #default="scope">
                        <div>
                            {{ scope.row.createTime
                                ? dayjs(scope.row.createTime
                                ).format('YYYY-MM-DD HH:mm:ss') : '' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="memberUsername" label="用户账户" />
                <el-table-column label="退款金额" width="130">
                    <template #default="scope">
                        <div>￥{{ scope.row.productRealPrice }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="申请状态" width="130">
                    <template #default="scope">
                        <div>{{ options[scope.row.status].value }}</div>
                    </template>
                </el-table-column>
                <el-table-column width="200" label="处理时间">
                    <template #default="scope">
                        <div>
                            {{ scope.row.handleTime
                                ? dayjs(scope.row.enableTime
                                ).format('YYYY-MM-DD HH:mm:ss') : '' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="Operations" width="200">
                    <template #default="scope">
                        <el-button @click="onrouteAppList(scope.row.id)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footer" style="margin-top: 30px; display: flex; justify-content: space-between;">
            <div>

                <el-select class="m-2" v-model="SelectValue" placeholder="批量处理">
                    <el-option v-for="item in options2" :key="item.value" :label="item.title" :value="item.value" />
                </el-select>
                <el-button @click="delclick">确定</el-button>
            </div>
            <!-- 分页器 -->
            <el-pagination style="float: right;" v-model:current-page="pagination.pageNum"
                v-model:page-size="pagination.pageSize" background :page-sizes="[1, 5, 10, 20]"
                layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { Tickets, Search } from '@element-plus/icons-vue'
import useTable from '../../hooks/useTables'
import * as api from '../../json/request/api'
import type { Ref } from "vue"
import { IAddReturnGoods } from "../../json/request/QmsAdminConreiller/index"
import { useRouter, useRoute } from 'vue-router'
import type { IreturnApplyList } from "../../json/request/QmsAdminConreiller/index"
import dayjs from "dayjs"
import { values } from "lodash"
import { number } from "echarts"
let router = useRouter()
let types = ref(0)
let values = ref('')
let valuesid = ref('')
let formVal = ref({
    id: Number(valuesid.value),
    status: Number(values.value),
    createTime: '',
    handleMan: '',
    handleTime: ''
})

let options = [
    {
        value: "待处理",
        label: '待处理'
    }, {
        value: "退货中",
        label: '退货中'
    }, {
        value: "已完成",
        label: '已完成'
    }, {
        value: "已拒绝",
        label: '已拒绝'
    }
]
let options2 = [{
    value: '批量删除',
    title: '批量删除'
}]

// 分页

let tableData: any, pagination: any, handleSizeChange: any, handleCurrentChange: any

function fen(type: number, formVal?: any) {
    let objdata: any = {

    }
    for (const key in formVal) {
        console.log(formVal[key]);

        if (formVal[key] !== '' && formVal[key] !== 0) {
            objdata[key] = formVal[key]
        }
    }
    console.log(objdata);
    if (objdata.status !== undefined) {
        objdata.status = objdata.status - 1
    }
    let obj = useTable(api.admin.returnApplyList,
        type === 0 ? undefined : objdata
    )

    tableData = obj.tableData
    pagination = obj.pagination
    handleSizeChange = obj.handleSizeChange
    handleCurrentChange = obj.handleCurrentChange
    console.log(tableData);

}
fen(0)

let SelectValue = ref("批量删除")


// 重置
let onShowEdit = () => {
    values.value = ''
    valuesid.value = ''
    formVal.value = {
        id: Number(valuesid.value),
        status: Number(values.value),
        createTime: '',
        handleMan: '',
        handleTime: ''
    }
}

let tablekey = ref(1)
// 查询
let onSearch = () => {
    console.log(formVal.value.createTime);
    formVal.value = {
        id: Number(valuesid.value),
        status: Number(
            options.findIndex(item => {
                return item.value === values.value
            })
        ) + 1,
        createTime: '',
        handleMan: '',
        handleTime: ''
    }
    types.value = 1
    fen(1, formVal.value)
    tablekey.value++
}
let objArr = ref([]) as Ref<number[]>
let handleSelectionChange = (val: any[]) => {
    objArr.value = []
    val.forEach((element: any) => {
        objArr.value.push(element.id)

    });
    console.log(objArr.value);

}

// 批量删除
let delclick = () => {
    if (SelectValue.value !== "批量删除") {
        return
    }
    objArr.value.forEach(async (item) => {
        await api.admin.deleteReturnApplyList(item)
    })
}

// 查看详情
let onrouteAppList = (id: number) => {
    router.push("/oms/returnApplyDetail?id=" + id)
}
</script>

<style scoped>
.form-item {
    margin: 10px 0 20px 50px;
}

.card {
    margin-top: 60px;
    margin-bottom: 30px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.demo-form-inline {
    float: left;
    padding: 20px;
}


:deep .cell {
    text-align: center;
}

:deep .el-form-item__content {
    width: 180px;
}

/* :deep .el-input__inner {
    width: 180px;
} */
</style>